<template>
    <div class="answer">
        <headerBar :title="title"></headerBar>
        <div class="answer-detail">
            <div class="question g_card" v-for="(item,index) in questions" :key="index">
                <div class="question_name">{{index + 1}}. {{item.question}}?</div>
                <div>
                    <van-radio-group v-model="form[`answer_${index+1}` ]">
                        <van-radio v-for="(option,option_index) in item.options" :key="option_index"
                                   :name="option_index + 1" class="radio">
                            <span>{{option_index + 1 | options }}</span>. <span>{{option}}</span></van-radio>
                    </van-radio-group>
                </div>
            </div>
        </div>
        <div align="right" class="submit">
            <van-button type="primary" size="small" @click="submit" :disabled="is_reward">提交答案</van-button>
        </div>
    </div>
</template>

<script>
import { getNewReward, getUserInfo } from "@/apis/apis";
import questions_arr from "@/assets/question";
import { gotoInvite } from "@/utils";
import headerBar from "@/components/headerBar";

function getArrayItems(arr, num) {
  var copyArr = [];
  for (var index in arr) {
    copyArr.push(arr[index]);
  }
  copyArr.sort(function() {
    return Math.random() - 0.5;
  });
  // 从原数组中一次性返回需要的元素
  return copyArr.slice(0, num);
}

export default {
  data() {
    return {
      show: false,
      form: {
        answer_1: "",
        answer_2: "",
        answer_3: "",
        answer_4: "",
        answer_5: ""
      },
      is_reward: false,
      chosen_questions: [],
      title: "迎新答题"
    };
  },
  components: {
    headerBar
  },
  filters: {
    options(key) {
      const map = {
        1: "A",
        2: "B",
        3: "C",
        4: "D"
      };
      return map[key];
    }
  },
  methods: {
    submit() {
      if (!Object.values(this.form).every(item => item !== "")) {
        return this.$toast({
          position: "bottom",
          message: "请先完成题目"
        });
      }
      const result = Object.values(this.form).every(
        (item, index) => item === this.chosen_questions[index].answer
      );
      getNewReward({ answer: result })
        .then(res => {
          if (res._status === 0) {
            if (result) {
              return this.$dialog
                .confirm({
                  message: "您已获得0.49宝石,邀请好友后也能获得0.49宝石",
                  duration: 1000,
                  background: "#bad12d",
                  confirmButtonText: "前往分享",
                  cancelButtonText: "立即抽奖",
                  closeOnClickOverlay: true
                })
                .then(() => {
                  gotoInvite();
                })
                .catch(() => {
                  this.router.push("/packages");
                });
            } else {
              return this.$dialog
                .confirm({
                  message:
                    "很遗憾,您答错题了!不要灰心,邀请好友后还能获得0.49宝石",
                  duration: 1000,
                  background: "#bad12d",
                  confirmButtonText: "前往分享",
                  cancelButtonText: "立即抽奖",
                  closeOnClickOverlay: true
                })
                .then(() => {
                  gotoInvite();
                })
                .catch(() => {
                  this.router.push("/packages");
                });
            }
          } else {
            this.$toast({
              message: res._reason,
              position: "bottom"
            });
          }
        })
        .catch(() => {
          this.$toast({
            message: "发生未知错误",
            position: "bottom"
          });
        });
    },
    beforeClose(action, done) {
      done();
      this.show = !this.show;
    },
    getUserInfo() {
      getUserInfo().then(res => {
        if (res._status === 0 && res.is_reward) {
          this.is_reward = true;
          this.$dialog
            .alert({
              message: "您已经答过题了,邀请好友后还能获得0.49宝石",
              duration: 1000,
              background: "#bad12d",
              confirmButtonText: "前往分享",
              closeOnClickOverlay: true
            })
            .then(() => {
              gotoInvite();
            });
        }
      });
    }
  },
  computed: {
    questions() {
      const arr = questions_arr.questions;
      const result = getArrayItems(arr, 5);
      this.chosen_questions = result;
      return result;
    }
  },
  mounted() {
    this.getUserInfo();
  }
};
</script>


<style lang="scss">
@import "@/style/var.scss";

.answer {
  text-align: left;
  background-color: $common_background_color;
  min-height: calc(100vh - 90px);
  color: #fff;
  .answer-detail {
    padding-top: 60px;
  }
  .question {
    margin: 10px;
    padding: 10px;
  }

  .question_name {
    margin-bottom: 15px;
  }

  .submit {
    padding: 10px;
  }

  .van-radio__input,
  .van-radio__label {
    display: inline;
  }

  .radio {
    display: flex;
    align-items: center;
    margin-top: 6px;
    margin-bottom: 6px;
  }
}
</style>
